<!--
 * @Author: your name
 * @Date: 2021-08-24 15:16:22
 * @LastEditTime: 2021-08-24 15:21:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template\tests\test\upload-excel.vue
-->
<template>
  <div class="app-container">
    <!-- on-success: 上传文件成功之后的处理 -->
    <!-- before-upload：上传之前执行一些业务的处理（判断文件是否符合上传的格式、传递的文件是否超过了限制的体积） -->
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    beforeUpload(file) {
      // 开始判断文件的体积是否小于 1 MB
      const isLt1M = file.size / 1024 / 1024 < 1

      // 如果小于，返回 true
      if (isLt1M) {
        return true
      }

      // 如果大于 1 MB，进行错误提示，并返回 false
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // 这个方法是我们主要实现功能的方法
    // 因为这个方法中已经读取到 Excel 中的数据
    // 但是读取到的数据并不符合接口的要求
    // 所以我们需要在这个方法中对读取的数据进行格式化，并且将数据传递给后端接口实现上传功能
    handleSuccess({ results, header }) {
      console.log(results)
      console.log(header)
      this.tableData = results
      this.tableHeader = header
    }
  }
}
</script>
